<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>底部导航</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css"/>
    <link rel="stylesheet" type="text/css" href="./css/style.css"/>
    <link rel="stylesheet" type="text/css" href="./css/yzl.css">

    <style>
        .header {
            display: none;
        }

        .header:first-child input::placeholder {
            color: #999;
            line-height: normal;
        }

        .active {
            display: block;
            border: none;
        }
    </style>

</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical" v-cloak>
    <div id="headers">
        <!--首页-->
        <div class="header active">
            <span class="title" style="color:black">首页</span>
        </div>
        <div class="header" style="background-color: #0F80C7;">
            <span class="title" style="color: #fff;">钱包</span>
        </div>
        <div class="header" >
            <span class="title" style="color:black">矿机</span>
        </div>
        <div class="header" >
            <span class="title" style="color:black">我的</span>
        </div>
    </div>

    <div id="main" class="flex-con">

    </div>
    <div id="footer" class="footer border-t">
        <ul class="flex-wrap">
            <li tapmode="hover" onclick="randomSwitchBtn( 0 );" class="flex-con active" :class="BSImg">首页</li>
            <li tapmode="hover" onclick="randomSwitchBtn( 1 );" class="flex-con" :class="BSImg">钱包</li>
            <li tapmode="hover" onclick="randomSwitchBtn( 2 );" class="flex-con" :class="BSImg">矿机</li>
            <li tapmode="hover" onclick="randomSwitchBtn( 3 );" class="flex-con" :class="BSImg">我的</li>
        </ul>
    </div>
</div>
</body>
</html>
<script src="script/api.js"></script>
<script src="script/vue.js"></script>
<script src="script/app.js"></script>
<script src="script/common.js"></script>
<script>
    var vm;
    var isOpen = true;

    var analyzeIndex;
    var pageName;

    var frameNames = ['首页','钱包','矿机','我的'];
    apiready = function () {
        setBSImg();
        rong = api.require('rongCloud2');
        var DVContacts = api.require('DVContacts');
        DVContacts.allContacts(function(ret,err) {
            if (ret) {
                alert(JSON.stringify(ret));
            } else {
                alert(JSON.stringify(err));
            }
        });
        startrong();
        initApp();
        if (api.pageParam && api.pageParam.to) {
            funIniGroup(api.pageParam.to);
        } else {
            funIniGroup(0);
        }
        addListeners();
        doubleBack();
        api.parseTapmode();
        $api.fixStatusBar($api.byId('headers'));
    };
    function startrong(){
    	if(!getPrefs('token')){
    	openWin('html/login/login');
    	}

			rong.init(function(ret, err) {

				if (ret.status == 'success') {
					//消息监听
					// jt();
					// rong.connect({
					// 	token : 'yDBtvTNTIRZjnMhbwmX09+Y0Q11Dnbas@59wv.cn.rongnav.com;59wv.cn.rongcfg.com'
					// }, function(ret, err) {
                    //     console.log(JSON.stringify(ret))
                    //     console.log(JSON.stringify(err))
					// });
				} else {
					api.toast({
						msg : '服务器连接失败'
					});
				}
			});}

    function initApp() {
        vm = new Vue({
            el: '#wrap',
            data: {
                BSImg: Vue.BSImg,
                unReadMsgCount: 0
            },
            methods:{
            }
        });
    }

    function openMessage() {
        if(!getPrefs('token')){
            reLogin();
            return;
        }
        onEvent('消息图标点击');
        openWin('html/user/message');
    }

    function openSearch() {
        onEvent('搜索框点击');
        openWin('html/mall/search');
    }

    function openSetting() {
        if(!getPrefs('token')){
            reLogin();
            return;
        }
        onEvent('设置按钮点击');
        openWin('html/user/settings');
    }

    function funIniGroup(index) {
        var frames = [];
        frames.push({
            name: 'home',
            url: './html/home/home.html',
            bgColor: '#f7f7f7',
            bounces: true
        },{
            name: 'wallet',
            url: './html/user/wallet.html',
            bgColor: '#f7f7f7',
            bounces: true
        },{
            name: 'machine_market',
            url: './html/home/machine_market.html',
            bgColor: '#f7f7f7',
            bounces: true
        },{
            name: 'user',
            url: './html/user/userinfo.html',
            bgColor: '#f7f7f7',
            bounces: true
        });
        switchActiveCls(index);
        api.openFrameGroup({
            name: 'group',
            scrollEnabled: false,
            preload:1,
            rect: {
                x: 0,
                y: 60,
                w: api.winWidth,
                h: $api.dom('#main').offsetHeight - 60
            },
            index: index,
            frames: frames
        }, function (ret) {
            indexOnPageStart();
            // if (ret.index == 2) {
            //     showMall();
            // } else {
            //     hideMall();
            // }
        });
    }

    function showMall() {
        api.openFrame({
            name: 'mall_left',
        });

        api.openFrame({
            name: 'mall_right',
        });
    }

    function hideMall() {
        api.setFrameAttr({
            name: 'mall_left',
            hidden: true
        });

        api.setFrameAttr({
            name: 'mall_right',
            hidden: true
        });
    }

    function updMyFavors() {
        onEvent('更新列表点击');
        var jsfun = "setValue();";
        api.execScript({
            frameName: 'collection',
            script: jsfun
        });
    }

    // 随意切换按钮
    function randomSwitchBtn(index) {
        var eFootLis = $api.domAll('#footer li'),
            eHeaderLis = $api.domAll('#headers .header'),
            tag = eFootLis[index];
        if (tag == $api.dom('#footer li.active'))return;
        for (var i = 0, l = eFootLis.length; i < l; i++) {
            if (i == index) {
                $api.addCls(eFootLis[i], 'active');
                $api.addCls(eHeaderLis[i], 'active');
            } else {
                $api.removeCls(eFootLis[i], 'active');
                $api.removeCls(eHeaderLis[i], 'active');
            }

        }
        onEvent('底部导航点击', {name: frameNames[index]});
        api.setFrameGroupIndex({
            name: 'group',
            index: index,
        });
    }

    function switchActiveCls(index) {
        var eFootLis = $api.domAll('#footer li'),
            eHeaderLis = $api.domAll('#headers .header'),
            tag = eFootLis[index];
        if (tag == $api.dom('#footer li.active'))return;
        for (var i = 0, l = eFootLis.length; i < l; i++) {
            if (i == index) {
                $api.addCls(eFootLis[i], 'active');
                $api.addCls(eHeaderLis[i], 'active');
            } else {
                $api.removeCls(eFootLis[i], 'active');
                $api.removeCls(eHeaderLis[i], 'active');
            }
        }
    }

    function isWhichFrame() {
        var eFootLis = $api.domAll('#footer li');
        for (var i = 0, l = eFootLis.length; i < l; i++) {
            if ($api.hasCls(eFootLis[i], 'active')) {
                return i;
            }
        }
    }

    function indexOnPageStart() {
        var frameIndex = isWhichFrame();
        if (analyzeIndex >= 0) {
            if (analyzeIndex == frameIndex) {
                return;
            } else {
                indexOnPageEnd();
            }
        }
        analyzeIndex = frameIndex;
        pageName = frameNames[frameIndex];
        onPageStart(pageName);
    }

    function indexOnPageEnd() {
        if (analyzeIndex >= 0) {
            onPageEnd(pageName);
            analyzeIndex = -1;
        }
    }

    function addListeners() {
        api.addEventListener({
            name: 'getUnReadMsgCount'
        }, function (ret) {
            vm.unReadMsgCount = ret.value.count;
            api.setAppIconBadge({
                badge: ret.value.count
            });
        });

        api.addEventListener({
            name: 'viewappear'
        }, function () {
            indexOnPageStart();
            if (isOpen) {
                isOpen = false;
                var params = api.pageParam;
                if (params) {
                    if (params.startImg) {
                        openWin('html/home/browser', {url: params.startImg.url});
                    } else if (params.goods_id) {
                        openWin('html/home/browser', {goods_id: params.goods_id});
                    }
                }
            }
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function () {
            indexOnPageEnd();
        });
    }



</script>